<template>
    <van-search v-model="value" show-action :placeholder=defaultKeyword.keyword @search="onSearch" @cancel="onCancel" />
    <hr>
    <div v-if="flag">
        <h3>热门搜索</h3>
        <van-tag color="grey" v-for="item in hotKeywordVOList" plain type="primary"
            @click="onClick(item.schemeUrl, item.keyword)">{{ item.keyword }}</van-tag>
    </div>
    <van-list v-else>
        <van-cell v-for="item in productList">
            <van-image :src="item.listPicUrl" @click="toDetail(item.id)"></van-image>
            <p class="name">{{ item.name }}</p>
            <div class="price">
                <span class="symbol">¥</span>
                <span class="real">{{ item.retailPrice }}</span>
                <s class="fake">¥{{ item.sortOriginPrice }}</s>
            </div>
            <div class="active">
                <!-- <span class="sale">{{ item.finalPriceInfoVO.banner.title }}</span>
                <span class="text">{{ item.finalPriceInfoVO.banner.content }}</span> -->
            </div>
        </van-cell>
    </van-list>
</template>
    
<script lang="ts" setup>
import { useSearch } from '@/hook/Search';
let { value, onSearch, onCancel, onClick, defaultKeyword, hotKeywordVOList, flag, productList, toDetail } = useSearch()
</script>
    
<style scoped lang="scss">
h3 {
    font-size: 14px;
    color: gray;
    padding: 10px;
    display: block;
}

.van-tag {
    padding: 5px;
    margin: 10px;
    font-size: 16px;
}

.van-list {
    display: flex;
    flex-wrap: wrap;

    .van-cell {
        width: 50%;

        .name {
            text-align: left;
            color: black;
        }

        .price {
            text-align: left;

            .symbol {
                color: red;
                font-size: 12px;
            }

            .real {
                color: red;
                font-size: 20px;
                font-weight: bold;
            }

            .fake {
                color: gray;
                font-size: 12px;
            }
        }

        .active {
            text-align: left;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            .sale {
                background: red;
                color: white;
                font-weight: bold;
                border-radius: 3px;
            }

            .text {
                background-color: #FFE9EB;
                color: red;
                font-weight: bold;
                border-radius: 3px;
            }
        }
    }
}
</style>